<template>
    <div class="login-box-container">
        <div class="line-box" style="height: 150px">
            <img src="../../assets/logo/fill/red.png">
        </div>
        <div class="line-box">
            <login-input label="电话号码" @model="(v)=>{phone=v}"></login-input>
        </div>
        <div style="height: 10px"></div>
        <div class="line-box">
            <login-input label="密码" type="password" @model="(v)=>{password =v}"></login-input>
        </div>
        <div style="height: 40px"></div>
        <div class="line-box">
            <login-btn @click="login">登陆</login-btn>
        </div>
    </div>
</template>

<script>
import loginInput from "../gears/loginInput.vue";
import loginBtn from "../gears/loginBtn.vue";
import router from "../../router/index.js";
import { useStore } from "vuex";
import {loginApi} from "../../api/loginApi.js";
import {onMounted, ref} from "vue";
import { ElMessage } from 'element-plus'
export default {
    name: "loginBox",
    components:{
        loginInput,
        loginBtn
    },
    setup() {
        const store = useStore()

        let phone = ref('')
        let password = ref('')


        async function login() {

            await loginApi.loginByPhone(phone.value, password.value, (res)=>{
                if (res.statusText === 'OK') {
                    console.log(res.data)
                    store.commit('loginStore/setToken',res.data.token)
                    store.commit('loginStore/setUid', res.data.account.id)
                    router.push('/main/music')
                }
            },()=>{
                ElMessage.error('登陆失败！')
            })
        }

        onMounted(()=>{

        })

        return {
            phone,
            password,
            login
        }
    }
}
</script>

<style scoped>
    .login-box-container {
        width: 400px;
        height: 500px;
        background: linear-gradient(white, #ffffff);
        border-radius: 20px;
        text-align: center;
        box-shadow: 0 0 10px #dedede;
    }

    .line-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .line-box img {
        width: 100px;
        height: 100px;
    }
</style>